<template>
  <div class="container">
    <div class="wrap">
      <mpvue-echarts :echarts="echarts" :onInit="onInit" />
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts/dist/echarts.min'
  import mpvueEcharts from 'mpvue-echarts'
  let radarChart

  function initChart (canvas, width, height) {
    radarChart = echarts.init(canvas, null, {
      width: width,
      height: height
    })
    canvas.setChart(radarChart)
    var option = {
      backgroundColor: '#ffffff',
      color: ['#37A2DA', '#FF9F7F'],
      tooltip: {},
      xAxis: {
        show: false
      },
      yAxis: {
        show: false
      },
      radar: {
        // shape: 'circle',
        indicator: [{
          name: '听力',
          max: 500
        },
        {
          name: '完形填空',
          max: 500
        },
        {
          name: '书面表达',
          max: 500
        },
        {
          name: '阅读理解',
          max: 500
        },
        {
          name: '短文改错',
          max: 500
        },
        {
          name: '语言知识运用',
          max: 500
        }
        ]
      },
      series: [{
        type: 'radar',
        data: [{
          value: [430, 340, 500, 300, 490, 400],
          name: 'shusc'
        },
        {
          value: [300, 430, 150, 300, 420, 250],
          name: 'shusc24'
        }
        ]
      }]
    }
    radarChart.setOption(option)
    return radarChart
  }
  export default {
    data () {
      return {
        echarts,
        onInit: initChart
      }
    },
    components: {
      mpvueEcharts
    },
    onShareAppMessage () {}
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    height: 460rpx;
  }
</style>
